
<template>
        <el-form ref="form" :model="data" :rules="rules" label-width="100px">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model.trim="data.name" placeholder="请填写分类名称" />
            </el-form-item>
            <el-form-item label="上级分类" prop="pid">
            <el-select v-model.trim="data.pid" placeholder="请选择上级" clearable  filterable  class="filter-item" >
                <el-option :value="0" label="顶级分类"></el-option>
                <el-option :disabled="category.level == 2"  v-for="(category,index) in category_list" :key="index" :value="category.id" :label="category.html + category.name"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-input-number :min="1"  v-model.trim="data.sort" placeholder="请填写排序" />
            </el-form-item>

            <el-form-item label="是否显示">
            <el-radio-group v-model="data.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>
        
            <el-form-item>
            <el-button type="primary" icon="el-icon-check" :disabled="$store.state.settings.ajaxButton" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
  </template>
  
  <script>
  import { getToken } from '@/utils/auth'
   import { detail,edit } from '@/api/equipment_category'
  
  
  export default {
    name: 'equipmentEreate',
    components: { },
    props: {
      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
      category_list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
        return {
            loading:false,
            dialogVisible:false,
            headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            rules: {
                name: [ 
                    { required: true, message: "请输入分类名称", trigger: "blur" }
                ], 

    
            },
            data: {
                id:"",
                name:'',
                pid:0,
                sort:0,
                status:1,
            }
        }
    },
    created() {
      const id = this.item.id
      this.data.id = id
      this.fetchData(id)
    },
    watch: {
      item: {
        handler(val, oldVal) {
          if (this.item.dialogVisible === true 
          ) {
            this.id = val.id
            this.fetchData(val.id)
          }
        },
        deep: true
      }
    },
    methods: {
   
  
      fetchData(id) {
            detail(id).then(response => {
              this.loading = false;
              this.data = response.data;

            }).catch(err => {
              console.log(err)
            })
          },
      submit() {
        const thiz = this
  
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false
          }
          edit(this.data).then(response => {
            this.$store.commit('settings/SET_AJAX_BUTTON', true);
            this.$message({
              message: '编辑成功',
              type: 'success',
              duration: 1500,
              onClose() {
                if (thiz.$refs.form !== undefined) {
                  thiz.$refs.form.resetFields()
                }
                thiz.item.dialogVisible = false
              }
            })
          })
        })
      }
    }
  }
  </script>
  